
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';

import App from './app';
import List from './views/list.jsx';
import Topic from './views/topic.jsx';


const ACTIVE = { color: 'red' };

const imgs=['http://pic.maizuo.com/usr/100002814/e43b3ff10d8f327f8126dcbf8a554944.jpg','http://pic.maizuo.com/usr/100002825/f2f33e9de25729c1c10bf3e7123b9af3.jpg','http://pic.maizuo.com/usr/100002775/5cfda893c3002a0ea3eb65219f134b32.jpg'];

class NoMatch extends React.Component {
	render() {
		return (<div className="no-content">
		<Link to="/sble" activeStyle={ACTIVE}>sble</Link>
		</div>)
	}
}
class Sble extends React.Component {
	render() {
		return <div className="no-content">
		nothing
		</div>
	}
}
class Other extends React.Component {
	constructor(props) {
		super(props)
		this.state ={
			type:'text',
			i:0,
		}
	}
	changeHandler() {
		;
	}
	clickHandler() {
		if (this.state.type==='text') {
			this.setState({
				type:'password',
			})
		} else {
			this.setState({
				type:'text',
			})
		}
		if (this.state.i<2) {
			this.setState({
				i:this.state.i+1
			})
		} else {
			this.setState({
				i:0
			})
		}
	}
	render() {
		return <div className="no-content">
		<Link to="/">index</Link>
		<input type={this.state.type} onChange={this.changeHandler.bind(this)}/>
		<img src={imgs[this.state.i]} alt=""/>
		<button onClick={this.clickHandler.bind(this)}>change</button>
		</div>
	}
}

class Routes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      	<Router history={browserHistory}>
		    <Route path="/" component={App}>
		      	<IndexRoute component={List}/>
		      	<Route path="sble" component={Sble}/>
		      	<Route path="list" component={List}>
			      	<IndexRoute component={List}/>
		      		<Route path=":tab" component={List}/>
		      	</Route>
		      	<Route path="topic/:id" component={Topic}/>
		    </Route>
		    <Route path="*" component={Other}/>
		</Router>
    );
  }
};

ReactDOM.render((<Routes/>),document.getElementById('root'))